<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

    <title>X+约课系统 - 团课列表</title>
    <meta name="keywords" content="后台bootstrap框架,会员中心主题,后台HTML,响应式后台">
    <meta name="description" content="完全响应式，基于Bootstrap3最新版本开发的扁平化主题，她采用了主流的左右两栏式布局，使用了Html5+CSS3等现代技术">

    <link rel="shortcut icon" href="../../static/favicon.ico" th:href="@{/static/favicon.ico}">
    <link href="../../static/css/bootstrap.min.css?v=3.3.6" th:href="@{/static/css/bootstrap.min.css(v='3.3.6')}"
          rel="stylesheet">
    <link href="../../static/css/font-awesome.css?v=4.4.0" th:href="@{/static/css/font-awesome.css(v='4.4.0')}"
          rel="stylesheet">
    <link href="../../static/css/animate.css" th:href="@{/static/css/animate.css}" rel="stylesheet">
    <link href="../../static/css/style.css?v=4.1.0" th:href="@{/static/css/style.css(v='4.1.0')}" rel="stylesheet">

    <!-- Data Tables -->
    <link href="../../static/css/plugins/dataTables/dataTables.bootstrap.css"
          th:href="@{/static/css/plugins/dataTables/dataTables.bootstrap.css}" rel="stylesheet">
    <link href="../../static/css/plugins/sweetalert/sweetalert.css" rel="stylesheet"
          th:href="@{/static/css/plugins/sweetalert/sweetalert.css}">

</head>

<body class="gray-bg">
<div class="wrapper wrapper-content animated fadeInRight">
    <div class="row">
        <div class="col-sm-12">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <a href="x_course_list_add.html" th:href="@{/course/x_course_list_add.do}" class="btn btn-success">添加课程</a>
                    <div class="ibox-tools">
                        <a class="collapse-link">
                            <i class="fa fa-chevron-up"></i>
                        </a>
                    </div>
                </div>
                <div class="ibox-content">

                    <table class="table table-striped table-bordered table-hover dataTables-example">
                        <thead>
                        <tr>
                            <th>课程名</th>
                            <th>时长(分钟)</th>
                            <th>上课容纳人数</th>
                            <th>操作</th>
                        </tr>
                        </thead>
                    </table>

                </div>
            </div>
        </div>
    </div>
</div>

<!-- 全局js -->
<script src="../../static/js/jquery.min.js?v=2.1.4" th:src="@{/static/js/jquery.min.js(v='2.1.4')}"></script>
<script src="../../static/js/bootstrap.min.js?v=3.3.6" th:src="@{/static/js/bootstrap.min.js(v='3.3.6')}"></script>

<script src="../../static/js/plugins/jeditable/jquery.jeditable.js"
        th:src="@{/static/js/plugins/jeditable/jquery.jeditable.js}"></script>
<!-- 自定义js -->
<script src="../../static/js/content.js?v=1.0.0" th:src="@{/static/js/content.js(v='1.0.0')}"></script>

<!-- Data Tables -->
<script src="../../static/js/plugins/dataTables/jquery.dataTables.js"
        th:src="@{/static/js/plugins/dataTables/jquery.dataTables.js}"></script>
<script src="../../static/js/plugins/dataTables/dataTables.bootstrap.js"
        th:src="@{/static/js/plugins/dataTables/dataTables.bootstrap.js}"></script>
<script src="../../static/js/plugins/sweetalert/sweetalert.min.js"
        th:src="@{/static/js/plugins/sweetalert/sweetalert.min.js}"></script>


<!-- Page-Level Scripts -->
<script>
    $(document).ready(function () {
        $.post("[[${#request.getContextPath()}]]/course/courseList.do", function (courseList) {
            $('.dataTables-example').dataTable({
                "data": courseList.data,
                //行的定义
                "columns": [
                    {"data": "name"},
                    {"data": "duration"},
                    {"data": "contains"},
                    {
                        "data": null, "orderable": false, "render": function (data, type, row) {
                            const id = row.id;
                            let html = "<a href='/course/x_course_list_edit.do?id=" + id + "'  class='btn btn-success btn-xs' > 编辑 <i class='fa fa-edit'></i></a>&nbsp &nbsp";
                            html += "<a href='#?id=" + id + "' onclick='getID(" + id + ")' class='btn btn-danger btn-xs' data-toggle='modal' data-target='#del_course'> 删除 <i class='fa fa-times'></i></a>"
                            return html;
                        }
                    }],
                /*href='x_course_list_edit.html?id="+id+"'*/
                //去掉搜索
                searching: false,
                lengthChange: false,
                language: {
                    "decimal": "",//小数的小数位符号  比如“，”作为数字的小数位符号
                    "emptyTable": "没有数据哟~~",//没有数据时要显示的字符串
                    "info": "当前 _START_ 条到 _END_ 条 共 _TOTAL_ 条",//左下角的信息，变量可以自定义，到官网详细查看
                    /*  "infoEmpty": "无记录",//当没有数据时，左下角的信息*/
                    "infoFiltered": "(从 _MAX_ 条记录过滤)",//当表格过滤的时候，将此字符串附加到主要信息
                    "infoPostFix": "",//在摘要信息后继续追加的字符串
                    "thousands": ",",//千分位分隔符
                    "lengthMenu": "每页 _MENU_ 条记录",//用来描述分页长度选项的字符串
                    "loadingRecords": "加载中...",//用来描述数据在加载中等待的提示字符串 - 当异步读取数据的时候显示
                    "processing": "处理中...",//用来描述加载进度的字符串
                    "search": "搜索",//用来描述搜索输入框的字符串
                    "zeroRecords": "没有找到",//当没有搜索到结果时，显示
                    "paginate": {
                        "first": "首页",
                        "previous": "上一页",
                        "next": "下一页",
                        "last": "尾页"
                    }
                }
            });

        });
    });
</script>

<!--删除课程模态框-->
<!--<div class="modal fade" id="del_course" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-md" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title text-center text-danger"><i class="fa fa-warning"></i>确认删除</h4>
            </div>
            <div class="modal-body">
                <p class="text-center">确认删除此课程嘛，删除后不能恢复</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-white" data-dismiss="modal">取消</button>
                <button type="submit" class="btn btn-danger" id="add_book_submit">确定</button>
            </div>
        </div>&lt;!&ndash; /.modal-content &ndash;&gt;
    </div>&lt;!&ndash; /.modal-dialog &ndash;&gt;
</div>&lt;!&ndash; /.modal &ndash;&gt;-->

<script type="text/javascript">
    var cid = "";

    function getID(c_id) {
        cid = c_id;

        console.log(cid);

        swal({
            title: "您确定要删除该课程么？",
            text: "注意:确认删除此课程嘛，删除后不能恢复！",
            type: "warning",
            showCancelButton: true,
            confirmButtonColor: "#b20a27",
            confirmButtonText: "删除",
            closeOnConfirm: false
        }, function () {
            $.ajax({
                url: "[[${#request.getContextPath()}]]/course/deleteOne.do",
                type: 'post',
                data: {id: cid},
                dataType: 'json',
                success: function (data) {
                    console.log(data)
                    if (data.code === 0) {
                        setTimeout(function () {},100);
                        swal(data.msg, "", "success");
                        setTimeout(function () {
                            window.location.href = "[[${#request.getContextPath()}]]/course/x_course_list.do";
                        }, 2000);
                    } else {
                        swal("删除失败！", data.msg, "info");
                        setTimeout(function () {
                            window.location.reload();
                        }, 2000);
                    }
                },
                error: function (data) {
                    swal("未知错误", data.msg, "info")
                }
            });
        });

    }

    //删除请求
   /* $(function () {
        // $("#add_book_submit").click(function () {
        $('#deleteOneBtn').click(function () {
            console.log(cid);

            swal({
                title: "您确定要删除该课程么？",
                text: "注意:确认删除此课程嘛，删除后不能恢复！",
                type: "warning",
                showCancelButton: true,
                confirmButtonColor: "#b20a27",
                confirmButtonText: "删除",
                closeOnConfirm: false
            }, function () {
                $.ajax({
                    url: "[[${#request.getContextPath()}]]/course/deleteOne.do",
                    type: 'post',
                    data: {id: cid},
                    dataType: 'json',
                    success: function (data) {
                        if (data.code === 0) {
                            swal(data.msg, "", "success");
                            setTimeout(function () {
                                window.location.href = "[[${#request.getContextPath()}]]/course/x_course_list.do";
                            }, 2000);
                        } else {
                            swal("删除失败！", data.msg, "info");
                            setTimeout(function () {
                                window.location.reload();
                            }, 2000);
                        }
                    },
                    error: function (data) {
                        swal("未知错误", data.msg, "info")
                    }
                });
            });


            /!*$.ajax({
                url: "[[${#request.getContextPath()}]]/course/deleteOne.do",
                type: "post",
                data: {id: cid},
                success: function (data) {
                    if (data.code === 0) {
                        //刷新界面
                        alert(data.msg)
                        setTimeout(function () {
                            window.location.href = "[[${#request.getContextPath()}]]/course/x_course_list.do";
                        }, 2000);
                    } else {
                        alert(data.msg)
                        window.location.reload();
                    }
                }
            });*!/
        });
    });*/
</script>

</body>
</html>
